<!--指派管理 -->
<template>
	<div class="contact flex" id="appoint">
		<div class="information">
			<div class="topfixed">
				<div class="infosearch marginAuto">
					<el-input class="infosearch-input" @change="getorder" v-model="searchtxt" prefix-icon="el-icon-search"
						placeholder="搜索"></el-input>
				</div>
				<div class="ointnav marginAuto">
					<div class="ointnavmain flex curpoin">
						<div class="ointnaveach" @click="navacfun(0)" :class="navac == 0 ? 'navactive':''">全部</div>
						<div class="ointnaveach" @click="navacfun(1)" :class="navac == 1 ? 'navactive':''">待指派</div>
						<div class="ointnaveach" @click="navacfun(2)" :class="navac == 2 ? 'navactive':''">更换指派</div>
						<div class="ointnaveach" @click="navacfun(3)" :class="navac == 3 ? 'navactive':''">已指派</div>
					</div>
				</div>
			</div>
			
			<div class="ointblock" @scroll="ointsescrollfun">
				<div class="ointeach curpoin" v-for="(item,index) in ointdata" :key="index"
					@click="ointsefun(item,index)" 
					:class="ointdataac == item.id ? 'activeointeach':''">
					<img class="ointeachbricon" src="@/assets/fun/ointicon.png" alt="图标" />
					<img class="ointeachbricon" v-if="ointdataac == item.id" style="width:32px;height:32px;right:3px;bottom:3px;" src="@/assets/fun/ointicon.png" alt="图标" />
					<div class="ointeacht mainColor flex">
						<span class="ellipsis01" style="width:70%;display:inline-block;">{{ item.order_sn }}</span>
						<span v-if="item.order_status == 0">待分派</span>
						<span v-if="item.order_status != 0">已分派</span>
					</div>
					<div class="ointeachb">
						<div class="ointeachbtitle ellipsis01">{{ item.order_name }}</div>
						<div class="ointeachbdec ellipsis01">{{ item.design_need }}</div>
					</div>
				</div>
				<div class="loadingicon" v-if="isloadingicon" style="height:20px;text-align:center;"><span class="el-icon-loading" style="font-size:22px;"></span></div>
			</div>
		</div>
		<!-- 右 -->
		<div class="rblock">
			<div class="ointrtitle">指派详情</div>
			<div class="nonephoto flex" v-if="!orderdatamsg.id">
				<img class="nonephotoimg marginAuto" src="@/assets/logoh.png" alt="" />
			</div>
			<div class="ointrt" v-if="orderdatamsg.id">
				<div class="ointrname ellipsis01">{{ orderdatamsg.order_name }}</div>
				<div class="ointrcode flex">
					<p class="ointrcode-num mainColor">{{ orderdatamsg.order_sn }}</p>
					<p class="ointrcode-status mainbg">
						{{ ointstate[orderdatamsg.order_status] }}
					</p>
				</div>
				<div class="ointrdem flex">
					<div class="ointrdem-each">
						<div class="ointrdem-fun flex">
							<div class="ointrdem-fune curpoin" @click="ointdownfun(orderdatamsg.design_need_file_img)" v-if="orderdatamsg.design_need_file_img.length > 0">
								<span class="ointrdem-funet mainColor">含图片</span>
								<span class="el-icon-picture-outline mainColor" style="font-size:14px;"></span>
							</div>
							<div class="ointrdem-fune curpoin" @click="ointdownfun(orderdatamsg.design_need_file_arr)" v-if="orderdatamsg.design_need_file_arr.length > 0">
								<span class="ointrdem-funet mainColor">含文档</span>
								<span class="el-icon-download mainColor" style="font-size:14px;"></span>
							</div>
						</div>
						<div class="ointrdem-name ellipsis01">设计需求</div>
						<div class="ointrdem-dec ellipsis04">{{orderdatamsg.design_need}}</div>
					</div>
					<div class="ointrdem-each">
						<div class="ointrdem-fun flex">
							<div class="ointrdem-fune curpoin" @click="ointdownfun(orderdatamsg.replenish_need_file_img)" v-if="orderdatamsg.replenish_need_file_img.length > 0">
								<span class="ointrdem-funet">含图片</span>
								<span class="el-icon-picture-outline" style="font-size:14px;"></span>
							</div>
							<div class="ointrdem-fune curpoin" @click="ointdownfun(orderdatamsg.replenish_need_file_arr)" v-if="orderdatamsg.replenish_need_file_arr.length > 0">
								<span class="ointrdem-funet">含文档</span>
								<span class="el-icon-download" style="font-size:14px;"></span>
							</div>
						</div>
						<div class="ointrdem-name ellipsis01">补充需求</div>
						<div class="ointrdem-dec ellipsis04">{{ orderdatamsg.replenish_need }}</div>
					</div>
				</div>
				<div class="ointrmoney">
					<span style="color:#999999;font-size: 14px;">订单金额：</span>
					<span class="ointrmoney-money mainColor" style="font-size:24px;">￥{{ orderdatamsg.order_amount }}</span>
				</div>
			</div>
			<div class="ointrpers marginAuto" v-if="orderdatamsg.id">
				<div class="ointrpers-name">参与人员</div>
				<div class="ointrpersclass flex">
					<div class="ointrpers-each curpoin" v-if="roleId == 3">
						<div class="ointrpers-eacht">
							<div class="ointrpers-le mainbg">设计师</div>
							<div class="ointrpers-icon">
								<div class="ointrpers-iconimg marginAuto">
									<img style="width:50px;height:50px;" v-if="orderdatamsg.design_avatar" :src="apifun.URLimg + orderdatamsg.design_avatar" alt="" />
									<img style="width:50px;height:50px;" v-if="!orderdatamsg.design_avatar" src="@/assets/fun/ointpericon.png" alt="" />
								</div>
								<div class="ointrpers-txt" v-if="orderdatamsg.order_status != 0">{{ orderdatamsg.design_name }}</div>
								<div class="ointrpers-txt" v-if="orderdatamsg.order_status == 0">暂无设计</div>
							</div>
						</div>
						<div class="ointrpers-eachb mainbg" @click="replacefun(1)">{{ orderdatamsg.order_status == 0 ? '指派设计':'更换设计' }}</div>
					</div>
					<div class="ointrpers-each curpoin" v-if="roleId == 2">
						<div class="ointrpers-eacht">
							<div class="ointrpers-le mainbg">销售</div>
							<div class="ointrpers-icon">
								<div class="ointrpers-iconimg marginAuto">
									<img style="width:50px;height:50px;" v-if="orderdatamsg.sale_avatar" :src="orderdatamsg.sale_avatar" alt="" />
									<img style="width:50px;height:50px;" v-if="!orderdatamsg.sale_avatar" src="@/assets/fun/ointpericon.png" alt="" />
								</div>
								<div class="ointrpers-txt" v-if="orderdatamsg.sale_name">{{ orderdatamsg.sale_name }}</div>
								<div class="ointrpers-txt" v-if="!orderdatamsg.sale_name">暂无销售</div>
							</div>
						</div>
						<div class="ointrpers-eachb mainbg" @click="replacefun(2)">{{ orderdatamsg.order_status == 0 ? '指派销售':'更换销售' }}</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 更换职称人员 -->
		<el-dialog  
		  title="指派/更换指派"
		  :visible.sync="replaceis"
		  width="432px"
		  top="200px"
		  :before-close="replaceClosefun"
		  :modal-append-to-body="false">
			<el-select class="replaceisselect" v-model="replacemsg.realname" placeholder="请选择" @change="replacemsgfun" style="width: 100%;height:50px;">
				 <el-option
					v-for="(item,index) in replacedata" :key="index"
					:label="item.realname" :value="item.user_id">
				 </el-option>
		   </el-select>
		   <div class="replacebtn">
			   <el-button class="replacebtneach" style="background-color:#999999;" @click="replaceis=false">取消</el-button>
			   <el-button class="replacebtneach mainbg" @click="replaceenterfun()">提交</el-button>
		   </div>
		</el-dialog>
		<!-- 下载文件 -->
		<el-dialog  
		  title="需求文件"
		  :visible.sync="xqwjis"
		  width="400px"
		  top="70px"
		  :before-close="replaceClosefun"
		  :modal-append-to-body="false">
			<div class="flielist">
				<div class="flieitem flex" v-for="(item,index) in xqwjdata" :key="index">
					<div class="flieiteml">
						<span class="flieitemlicon el-icon-document"></span>
						<span class="flieitemlname">{{ item.name }}</span>
					</div>
					<div class="flieitemr curpoin" @click="downfilefun(item,index)">
						<span class="el-icon-download"></span>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { getFileSize, getFileExtImg,download } from "@/utils/file";
	export default {
		data(){
			return {
				roleId:'',  // 2销售总监 3 售后总监
				page:1,
				limit:10,
				isshake : true,
				isloadingicon:false,
				searchtxt:'',
				navac:0,  // 切换导航
				ointdata:[],
				ointdataac:'',
				orderdatamsg:{
					design_need_file_arr:[],
					replenish_need_file_arr:[]
				},
				ointstate: ['未分配', '进行中', '已定稿', '死单', '暂停', '退款中', '已退款'],
				replaceis:false,
				replacemsg:{
					realname:'',
					user_id:''
				},
				replacedata:[],
				xqwjis:false,
				xqwjdata:[],
			}
		},
		beforeCreate(){},
		mounted(){
			this.roleId = this.$store.state.roleId;
			this.page =  1;
			this.ointdata=[];
			this.getorder();
		},
		methods:{
			replaceenterfun(){  // 确认更换职称
				let urls = '/pc/order/assignSales';  
				if(this.roleId == 2){
					urls = '/pc/order/assignSales'   // 销售
				}else if(this.roleId == 3){
					urls = '/pc/order/assignDesigner'   // 设计
				};
				let sendData = {
					orderId:this.orderdatamsg.id,
					userId:this.replacemsg.user_id
				};
				this.apifun.$post(urls,sendData).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						this.$message({
							message: '操作成功',
							type: 'success'
						});
						this.replaceis = false;
						this.ointsefun({id:this.ointdataac})
					}
				})
			},
			replacefun(type){  // 更换职称人员 1设计师 2销售
				this.apifun.$post('/pc/order/designer',{}).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						let datas = res.data;
						this.replacedata = datas;
						this.replaceis = true;
						this.replacemsg = {
							realname:'',
							user_id:''
						}
					}
				})
			},
			replacemsgfun(e){  // 选择更换人员
				this.replacemsg.user_id = e;
			},
			replaceClosefun(){ // 关闭
				this.replaceis = false;
				this.xqwjis = false
			},
			ointdownfun(arr){  // 展示需求
				if(arr.length > 0){
					this.xqwjis = true;
					this.xqwjdata = arr;
				}
			},
			downfilefun(item,index){  // 下载需求
				download(item.src,item.name)
			},
			ointsefun(item){  // 切换指派列表&获取详情
				this.ointdataac = item.id;
				let sendData = {
					id : item.id
				};
				this.apifun.$post('/api/Order/orderDetails',sendData).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						this.orderdatamsg = res.data;
					}
				})
			},
			ointsescrollfun(event){
				const { scrollTop, scrollHeight, clientHeight } = event.target;
			    if (this.isloadingicon) return;
				if (scrollTop + clientHeight >= scrollHeight - 10) {  // 留10px加载
					if(this.isshake){
						this.isshake = false;
						this.page++;
						this.getorder();
					}
				}
			},
			navacfun(type){
				if(type == this.navac)return false;
				this.navac=type;
				this.page = 1;
				this.ointdata=[];
				this.ointdataac='';
				this.orderdatamsg = {};
				this.getorder();
			},
			getorder(){  // 获取指派列表
				let sendData = {
					keyword :this.searchtxt,
					page:this.page,
					limit:this.limit
				}
				if(this.navac ==  0){
					sendData.order_status = ''
				}else if(this.navac ==  1){
					sendData.order_status = 0
				}else if(this.navac ==  2){
					sendData.order_status = 2
				}else if(this.navac ==  3){
					sendData.order_status = 1
				}
				this.isloadingicon=true;
				this.apifun.$post('/pc/Order/assignOrders',sendData).then((res)=>{
					// console.log(res)
					this.isloadingicon=false;
					this.isshake = true;
					if(res.code ==  200){
						let datas = res.data;
						if(datas.data.length <= 0){
							this.page--;
							return false
						};
						this.ointdata = [...this.ointdata,...datas.data];
						// if(this.ointdata.length > 0 && this.page == 1){
						// 	this.ointdataac = datas.orders[0].id;
						// 	this.ointsefun(datas.orders[0]);
						// }
					}
				})
				
			}
		}
	}
</script>
<style>
	#appoint .infosearch-input .el-input__inner{
		background-color: #FFF6F1;
		height:36px;
		line-height: 36px;
	}
	#appoint .infosearch-input .el-input__inner:focus,
	#appoint .replaceisselect .el-input__inner:focus{
		border-color:#FF5E03;
	}
	#appoint .replaceisselect .el-input__inner{
		height: 50px;
		line-height: 50px;
		background-color: #F6F6F6;
		
	}
</style>
<style scoped lang="scss">
	.information {
		position: relative;
		z-index: 100;
		width:200px;
		height: 98vh;
		overflow-y: auto;
		background-color: #fff;
		border-right: 1px solid #EBEBEB;
		overflow-x:hidden;
	}
	.topfixed{
		position:sticky;
		z-index: 100;
		top: 0;
		left: 0;
		width:200px;
		background-color: #fff;
	}
	// 搜索
	.infosearch {
		z-index: 100;
		width: 180px;
		height: 38px;
		.infosearch-input {
			width: 180px;
			height: 38px;
			border: none;
			margin-top: 5px;
		}
	}
	// nav导航
	.ointnav{
		width: 180px;
		overflow-x:scroll;
		.ointnavmain{
			width:210px;
			padding:20px 0 10px;
			.ointnaveach{
				position: relative;
				height:22px;
				color:#333333;
				font-weight: bold;
				font-size: 14px;
				margin-right: 10px;
			}
			.ointnaveach::before{
				position: absolute;
				bottom:-4px;
				display: block;
				content: "";
				width: 100%;
				height:6px;
				background-color:#fff;
				border-radius:100px;
			}
			.navactive{
				color: var(--mainColor);
			}
			.navactive::before{
				background-color:var(--mainColor);
			}
		}
	}
	// 指派列表
	.ointblock {
		width: 180px;
		height:81vh;
		margin: 20px auto;
		overflow-y: auto;
		.ointeach {
			position: relative;
			width: 178px;
			margin-bottom: 20px;
			border-radius: 10px;
			.ointeachbricon{
				position: absolute;
				bottom:7px;
				right:7px;
				width:16px;
				height: 16px;
			}
			.ointeacht{
				width: 160px;
				padding: 0 10px;
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #EEEEEE;
				justify-content: space-between;
				font-size:14px;
			}
			.ointeachb{
				width: 160px;
				padding: 5px 10px;
				line-height: 30px;
				color: #333;
				.ointeachbtitle{
					font-weight: bold;
					font-size:14px;
				}
				.ointeachbdec{
					font-size:14px;
				}
			}
		}
	
		.activeointeach {
			background-color: var(--bgColor);
		}
	}
	// 右部指派详情信息
	.rblock{
		position: relative;
		flex: 1;
		z-index: 99;
		background-color:#F7F7F7;
		.nonephoto{
			width: 98%;
			margin: 10px auto;
			height:88vh;
			border-radius: 10px;
			background-color: #fff;
			.nonephotoimg{
				width:150px;
			}
		}
	}
	.ointrtitle{
		position:sticky;
		top: 0;
		z-index:50;
		width:96%;
		padding:0px 2% 10px;
		height:40px;
		line-height: 40px;
		border-bottom: 1px solid #EEEEEE;
		color:#333333;
		font-size:14px;
		font-weight: bold;
		background-color: #fff;
	}
	// 右-信息
	.ointrt{
		width:94%;
		padding:10px;
		background-color:#fff;
		border-radius:8px;
		margin: 10px auto;
		.ointrname{
			font-size: 16px;
			color:#333333;
			height: 20px;
			line-height:20px;
			font-weight: bold;
		}
		.ointrcode{
			padding: 10px 0;
			line-height: 20px;
			.ointrcode-num{
				font-size:14px;
			}
			.ointrcode-status{
				display: inline-block;
				padding: 0 10px;
				font-size:14px;
				color: #fff;
				margin-left: 16px;
				border-radius:2px;
			}
		}
		.ointrdem{
			justify-content: space-between;
			.ointrdem-each{
				position: relative;
				width:47%;
				height: 110px;
				padding:8px;
				background-color:var(--bgColor);
				border-radius: 5px;
				.ointrdem-fun{
					position: absolute;
					right:0px;
					.ointrdem-fune{
						font-size: 12px;
						margin-right:12px;
						color:#999999;
						.ointrdem-funet{
							margin-right:2px;
						}
					}
				}
				.ointrdem-name{
					line-height: 20px;
					font-size: 14px;
					color: #333;
					font-weight: bold;
				}
				.ointrdem-dec{
					margin-top:10px;
					font-size: 14px;
					color: #333;
					line-height: 20px;
					height:80px;
					overflow-y: auto;
				}
			}
		}
		.ointrmoney{
			width:96%;
			background-color:#F7F7F7;
			padding: 10px 2%;
			line-height: 30px;
			margin-top: 10px;
		}
	}
	// 参与人员
	.ointrpers{
		width: 94%;
		padding: 10px;
		background-color: #fff;
		border-radius:10px;
		margin: 10px auto;
		.ointrpers-name{
			line-height:30px;
			color: #333333;
			font-size: 16px;
			font-weight: bold;
		}
		.ointrpersclass{
			margin-top: 10px;
			.ointrpers-each{
				position: relative;
				width: 130px;
				margin-right: 50px;
				border-radius:10px;
				background-color: var(--bgColor);
				.ointrpers-eacht{
					position: relative;
					width: 130px;
					height:150px;
					.ointrpers-le{
						position:absolute;
						top: 0;
						left: 0;
						padding: 0 10px;
						line-height:22px;
						font-size:12px;
						color: #fff;
						text-align: center;
						border-top-left-radius:10px;
						border-bottom-right-radius:10px;
					}
					.ointrpers-icon{
						padding-top: 30px;
						.ointrpers-iconimg{
							width: 50px;
							height: 50px;
						}
						.ointrpers-txt{
							font-size:14px;
							color:#333;
							line-height: 40px;
							text-align: center;
						}
					}
				}
				.ointrpers-eachb{
					width: 130px;
					height:40px;
					line-height: 40px;
					text-align: center;
					color: #fff;
					font-size:14px;
					border-bottom-left-radius:10px;
					border-bottom-right-radius:10px;
				}
			}
		}
	}
	// 弹窗
	.replacebtn{
		margin-top: 30px;
		display: flex;
		justify-content:flex-end;
		.replacebtneach{
			width:130px;
			height: 50px;
			border-radius: 10px;
			color: #fff;
			font-size:16px;
			margin-left: 25px;
		}
	}
	// 上传文件list
	.flielist{
		margin-top:10px;
		.flieitem{
			justify-content: space-between;
			line-height:30px;
			padding: 0 10px;
			border-radius: 5px;
			.flieiteml{
				.flieitemlicon{font-size:16px;}
				.flieitemlname{
					font-size: 14px;
					margin-left:8px;
				}
			}
			.flieitemr{
				width:30px;
				text-align: center;
				font-size:16px;
				color:#999;
				text-align: right;
			}
		}
		.flieitem:hover{
			background-color:#F7F7F7;
		}
	}
</style>